<template>
    <div>

        <div class="tabList">
            <div class="tabItem" :class="{active:item.isActive}" v-for="(item,index) in dataList" :key="index" @click="tabClick(item)">
                {{item.name}}
                <img v-show="!item.hasApply" src="../../assets/informationEntry/flag.png">
            </div>

            <div class="operation">
                <el-button type="primary" size="midum" @click="save()">保存</el-button>
            </div>            
        </div>
        <div class="content">
            <div class="conditions">
                <div class="cList" v-for="(item,index) in currentSelectedData.qaClauseList" :key="index">
                    <div class="cTitle" v-show="currentSelectedData.qaClauseList[index].maxOrderNo != -1"><span style="margin-right:10px;">{{currentSelectedData.qaClauseList[index].maxOrderNo}}.</span>具备下列条件之一：</div>
                    <div class="cContent">
                        <div><span style="margin-right:10px;">{{item.orderNo}}</span>{{item.content}}</div>
                        <div class="option">
                            <el-radio label="1" v-model="item.result">是</el-radio>
                            <el-radio label="0" v-model="item.result">否</el-radio>
                        </div>
                        <label class="annex">
                            <img src="../../assets/informationEntry/annex.png">    
                            <input type="file"  @change="uploadAnnex(item)" >
                        </label>
                    </div>
                </div>

                <div class="next">
                    <el-button type="primary" size="mini" @click="next()">下一项</el-button>
                </div>

                <!-- 工作流 -->
                <div class="workflow">
                        <div class="workItem" :class="{active:item.hasApply}" v-for="(item,index) in dataList" :key="index">
                            <div class="point">
                                <img v-show="item.hasApply" src="../../assets/informationEntry/wf.png">
                                <img v-show="!item.hasApply" src="../../assets/informationEntry/wfd.png">
                                <label>{{item.name}}</label>
                            </div>
                            <div v-show="index < (dataList.length - 1)" class="line">
                                <div class="c"></div>
                            </div>
                       </div>
                </div>
                <div class="workTip">
                    距离完成所有项目仅剩{{this.undoneCount}}项
                </div>

            </div>

        </div>
    </div>
</template>

<script>

import { infoEntryConditionPost,infoEntrySavePost,infoEntryUploadPost } from '@/service/api'
export default {
    data(){
        return {
            dataList:[],
            currentSelectedData:"",
            // 附件Map<条件ID，附件URL>
            annexMap:[],

            undoneCount:0
        }
    },
    mounted(){
        this.loadCondition();
    },
    methods:{
        next(){

            for(var i=0;i<this.dataList.length;i++){
                if(this.currentSelectedData.id == this.dataList[i].id){
                    if(i < (this.dataList.length-2)){
                        if(this.dataList[i+1].qaClauseList.length <= 0){
                            this.$message({message: '没有一下项了',type: 'warning'});
                        }else{
                            this.tabClick(this.dataList[i+1]);
                            break;
                        }
                    }
                }
            }


        },
        tabClick(item){
            for(var i=0;i<this.dataList.length;i++){
                if(this.dataList[i].id == item.id){
                    this.dataList[i].isActive = true;
                    this.currentSelectedData = this.dataList[i];
                }else{
                    this.dataList[i].isActive = false;
                }
            }
        },
        loadCondition(){
            infoEntryConditionPost().then(res => {
                if(res.code == 200){
                    for(var i=0;i<res.data.length;i++){
                        res.data[i].isActive = false;

                        var orderNo = 1,minOrderNo=1;
                        minOrderNo;
                        for(var e=0;e<res.data[i].qaClauseList.length;e++){
                            if(res.data[i].qaClauseList[e].qaApplyRecordAttribute != undefined){
                                res.data[i].qaClauseList[e].result = res.data[i].qaClauseList[e].qaApplyRecordAttribute.userChoice + "";
                            }

                            res.data[i].qaClauseList[e].maxOrderNo = -1;
                            if(res.data[i].qaClauseList[e].type == 2){
                                if(e == 0 || res.data[i].qaClauseList[e-1].type != 2){
                                    res.data[i].qaClauseList[e].oTitle = true;
                                    res.data[i].qaClauseList[e].maxOrderNo = orderNo;
                                    ++orderNo
                                }
                                res.data[i].qaClauseList[e].orderNo = minOrderNo + ">.";
                                
                                ++minOrderNo;
                            }else{
                                minOrderNo = 1;

                                res.data[i].qaClauseList[e].orderNo = orderNo + ".";
                                ++orderNo;
                            }
                        }
                    }
                    this.dataList = Object.assign([],res.data);

                    // 计算未完成项目数量
                    for(i=0;i<this.dataList.length;i++){
                        if(!this.dataList[i].hasApply){
                            ++this.undoneCount;
                        }
                    }

                    this.tabClick(this.dataList[0]);
                }
            });
        },
        save(){
            var cList = this.currentSelectedData.qaClauseList;

            var map = new Map();
            for(var i=0;i<cList.length;i++){
                if(cList[i].result == undefined){
                    map.set(cList[i].id,"0");
                }else{
                    map.set(cList[i].id,cList[i].result);
                }
            }

            let obj= Object.create(null);
            for (let[k,v] of map) {
                obj[k] = v;
            }
            var json = JSON.stringify(obj);


            var formData = new FormData;
            // 
            formData.append("categoryId",this.currentSelectedData.id);
            //  "操作类型  1：新增   2：修改 "
            formData.append("operateType",1);
            formData.append("clause",json);
            infoEntrySavePost(formData).then(res => {
                if(res.code == 200){
                    this.$message({message: '保存成功！',type: 'success'});
                }
            });
        },
        uploadAnnex(item){

            var fr = new FileReader();
            fr.readAsDataURL(event.target.files[0]);
            fr.onload = function(){
             
                var formData = new FormData;
                formData.append("file",this.result);
                formData.append("clauseId",item.id);
                infoEntryUploadPost(formData).then(res => {
                    res;
                });
            }
            event.target.value = "";
        }
    }



}
</script>

<style scoped>

.tabList{
    margin-top: 18px;
    display:flex;
}
.tabList .tabItem{
    position: relative;
    padding:7px 14px;
    margin-right: 1px;
    font-size: 14px;
    color: #175AFF;
    cursor: pointer;

    background-image:url(../../assets/informationEntry/tab.png);
    background-size:100% 100%;    /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
    background-repeat:no-repeat;
    background-position:bottom;   /* left/center/right top/center/bottom;*/
}
.tabList .tabItem.active{
    color: white;
    background: #31478f;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}
.tabList .tabItem>img{
    position: absolute;
    top: 0px;
    right: 5px;
    width:7px;
}
.tabList .operation{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
}
.tabList .operation>button{
    padding: 6px 15px;
}
.content{
    padding: 20px 33px;
    background: white;
}


/* 申报条件 */
.conditions{
    display: flex;
    flex-direction: column;
    color: #333333;
}
.cList{
    display:flex;
    flex-direction: column;
}
.cContent,.cTitle{
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #31478f;
    margin: 8px 2px;
}
.cContent .annex{
    cursor: pointer;
}
.cContent .annex>input{
    display: none;
}
.cContent .option{
    text-align: right;
    padding-right: 60px;
    min-width: 200px;
}
.cContent>*:not(:last-child){
    flex-grow: 1;
}

/* 下一步 */
.next{
    display: flex;
    justify-content: center;
    margin: 60px;
}
.next button{
    padding: 7px 35px;
}


/* 工作流 */
.workflow{
    display: flex;
    flex-direction: row;
    margin:30px 90px;
    margin-bottom: 80px;
}
.workflow>.workItem:not(:last-child){
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}
.workflow>.workItem .point{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    color: #B0B0B0;
    font-size: 16px;
}
.workflow>.workItem.active .point{
    color: #417FFE;
}
.workflow>.workItem .point>img{
    width: 39px;
    height: 39px;
}
.workflow>.workItem .point.active>img{

}
.workflow>.workItem .point>label{
    position: absolute;
    top: 50px;
    white-space: nowrap;
}
.workflow>.workItem .line{
    height: 39px;
    flex-grow: 1;
    min-width: 50px;
    display: flex;
    flex-direction: row;    
    align-items: center;
}
.workflow>.workItem .line>.c{
    background: gray;
    height: 4px;
    flex-grow: 1;
    background: -webkit-linear-gradient(left,#b0b0b0, #ebebeb); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,#b0b0b0, #ebebeb); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,#b0b0b0, #ebebeb); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, #b0b0b0,  #ebebeb); /* 标准的语法 */
}
.workflow>.workItem.active .line>.c{
    background: -webkit-linear-gradient(left,#31478f, #dbdbdb); /* Safari 5.1 - 6 */
    background: -o-linear-gradient(right,#31478f, #dbdbdb); /* Opera 11.1 - 12*/
    background: -moz-linear-gradient(right,#31478f, #dbdbdb); /* Firefox 3.6 - 15*/
    background: linear-gradient(to right, #31478f,  #dbdbdb); /* 标准的语法 */
}

.workTip{
    display: flex;
    align-items:center;
    justify-content: center;
}

</style>